<template>
  <div class="block backup">
    <div class="block-title">
      <div class="block-options pull-right">
        <router-link :to="{name:'backupIndex'}" tag="a"
                     class="btn btn-effect-ripple btn-default toggle-bordered enable-tooltip" data-toggle="button"
                     title="" style="overflow: hidden; position: relative;"
                     data-original-title="Toggles .form-bordered class">
          备份列表
        </router-link>
      </div>
      <h2>数据备份</h2>
    </div>
    <form class="form-horizontal form-bordered">
      <div class="form-group">
        <label class="col-md-3 control-label">TIPS</label>
        <div class="col-md-9">
          <p class="form-control-static">备份数据表可支持分卷</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label" for="example-text-input">表名称</label>
        <div class="col-md-6">
          <input type="text" id="example-text-input" v-model="Info.tableName" name="example-text-input"
                 class="form-control" placeholder="填写表名称">
          <span class="help-block">请输入表名称</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label" for="example-text-path">备份路径</label>
        <div class="col-md-6">
          <input type="text" id="example-text-path" v-model="Info.backupDir" name="example-text-input"
                 class="form-control" placeholder="填写备份路径">
          <span class="help-block">备份路径</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label" for="example-text-size">备份大小</label>
        <div class="col-md-6">
          <input type="text" id="example-text-size" v-model="Info.sizeOf" name="example-text-input" class="form-control"
                 placeholder="填写备份大小">
          <span class="help-block">备份大小</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">是否卷</label>
        <div class="col-md-9">size
          <label class="radio-inline" for="example-inline-radio1">
            <input type="radio" id="example-inline-radio1" v-model="Info.subsection" name="example-inline-radios"
                   value="1"> 分卷
          </label>
          <label class="radio-inline" for="example-inline-radio2">
            <input type="radio" id="example-inline-radio2" v-model="Info.subsection" name="example-inline-radios"
                   value="0"> 不分卷
          </label>
        </div>
      </div>
      <div class="form-group form-actions">
        <div class="col-md-9 col-md-offset-3">
          <button type="button" class="btn btn-effect-ripple btn-primary" style="overflow: hidden; position: relative;"
                  @click="backup">备份
          </button>
          <button type="reset" class="btn btn-effect-ripple btn-danger" style="overflow: hidden; position: relative;">
            重新填写
          </button>
        </div>
      </div>
    </form>
    <loading v-if="loadAt"></loading>
  </div>
</template>
<script type="text/ecmascript-6">
  import http  from '../../static/http/http'
  import loading from '../../components/comment/loading/loading'
  import  {mapState,mapMutations} from 'vuex'
  const ERROR_CODE    =1001;
  export default{
    name: 'backup',
    data(){
      return {
        Info: {subsection: 1, sizeOf: '', backupDir: '', tableName: ''}
      }
    },
    create(){

    },
    methods: {
      ...mapMutations({
        set_loadAt:'set_loading'
      }),
      backup(){
        this.set_loadAt({code:100,meta:true});
        this.apiPost('/api/admin/backup/backup', this.Info).then((response) => {


            let error_code      = response.data.status;
            if(error_code!==ERROR_CODE){
                this.set_loadAt({code:102,meta:false,custom_info:response.data.info});
                return false;
            }
            this.set_loadAt({code:102,meta:false,custom_info:response.data.info});
        }).catch((response) => {
          this.set_loadAt({code:102,meta:false,custom_info:response});
        })
      }
    },
    computed: {
      ...mapState({
        loadAt:'loading'
      }),
    },
    components: {loading},
    mixins: [http]
  }
</script>
<style type="stylus">
</style>
